<template>
  <el-menu
    class="menu-nav"
    router
    :default-active="currentPath"
    background-color="#fff"
    text-color="#000"
    active-text-color="#004A1F"
    :unique-opened="true"
    :collapse="isCollapse">

    <el-menu-item index="/dashboard">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>

<!--    <el-submenu :index="index+''" v-for="(item,index) in menuList">
      <template slot="title">
      <i :class="item.icon"></i>
      <span>{{item.meta.title}}</span>
      </template>

      <template v-for="(itemchild,index) in item.children">
        <el-menu-item :index="itemchild.index+''"  v-if="!itemchild.children">{{itemchild.meta.title}}</el-menu-item>
        <el-submenu :index="index+'1001'"  v-else>
          <template slot="title">
          <span>{{itemchild.meta.title}}</span>
          </template>
          <el-menu-item :index="itemchild.index" v-for="itemchild in itemchild.children" >{{itemchild.meta.title}}</el-menu-item>
        </el-submenu>
      </template>
    </el-submenu>


    <p>后台加载的数据344</p> -->

    <el-submenu :index="item.index" v-for="(item,index) in menuList" v-if="item.meta">
      <template slot="title">
      <i :class="item.meta.icon"></i>
      <span>{{item.meta.title}}</span>
      </template>

      <template v-for="(itemchild,index) in item.children">
        <el-menu-item :index="itemchild.component"  v-if="!itemchild.children">{{itemchild.meta.title}}</el-menu-item>
        <el-submenu :index="item.index"  v-else>
          <template slot="title">
          <span>{{itemchild.meta.title}}</span>
          </template>
          <el-menu-item :index="itemchild.component" v-for="itemchild in itemchild.children" >{{itemchild.meta.title}}</el-menu-item>
        </el-submenu>
      </template>
    </el-submenu>
  </el-menu>

</template>

<script>
  import {
    getRouters
  } from '@/api/getData'
export default {
  props: ['isCollapse'],
  data () {
    return {
      currentPath: location.pathname,
      menuList:[],
      menuStateList:[],//后台请求出来的
    }
  },
  created() {
    this.menuList = JSON.parse(this.$store.state.menuList);
    this.setAuthority();
    // this.menuList = JSON.parse(this.$store.state.menuList);
    // this.setAuthority();
    // this.getMenus();
  },
  methods:{
    setAuthority(){/*登录后设置权限页面 是否可以进入*/
      let menuStatusList = [];/*有权限的页面*/
      for(let i=0;i<this.menuList.length;i++){
        if(this.menuList[i].children){
          for(let a = 0;a<this.menuList[i].children.length;a++){
            menuStatusList.push(this.menuList[i].children[a])
              if(this.menuList[i].children[a].children){
                 for(let b = 0;b<this.menuList[i].children[a].children.length;b++){
                   menuStatusList.push(this.menuList[i].children[a].children[b])
                 }
              }
          }
        }

      }
      for(let a=0;a<this.$router.options.routes[0].children.length;a++){
        for(let i=0;i<menuStatusList.length;i++){
          if(this.$router.options.routes[0].children[a].path == menuStatusList[i].component){
            this.$router.options.routes[0].children[a].meta.authority = true;
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-menu {
    border: none;
  }
  .menu-nav:not(.el-menu--collapse) {
    //width: 200px;
    min-height: 400px;
  }

  .el-menu-item:focus, .el-menu-item:hover{
  	background-color:#rgb(204, 204, 204)!important;
  	color:#004A1F!important;
  }
  .el-menu-item:hover i{
  	color:#004A1F!important;
  }
  .icon{color:#fff}
  .sidebar /deep/ .el-submenu__icon-arrow{
  	color:#fff!important;
  }
  .el-menu-item.is-active{
  	background-color:#FC5173!important;
  }
  .menu-nav i,.menu-nav /deep/ i{
    color: #000!important;
  }
</style>
